<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/component/commonTagLib.jsp" %>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <%@ include file="/WEB-INF/component/commonCSS.jsp" %>
    <link href="${ctx}/lib/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <style type="text/css">
    	table.privilegeTable {
    		width: 100%;
    		border-collapse: collapse;
    	}
    	div.ztreePanel {
    		max-height: 450px;
    		min-height: 390px;
    		overflow: auto;
    	}
    	div.ztree {
    		margin: 20px;
    	}
    	.leftTd {
    		vertical-align: top;
    	}
    	.rightTd {
    		width: 60%;
    		height: 100%;
    		vertical-align: top;
    		border-left: 1px solid #ccc;
    	}
    	div.rightTitleDiv {
    		font-size: 20px;
    		margin: 10px 0px 20px 0px;
    		padding: 10px 20px;
    		border-bottom: 1px solid #ccc;
    	}
    	div.rightTextDiv {
    		margin: 10px 0px;
    		padding: 5px 20px;
    	}
    	span.required {
    		color: red;
    		margin-right: 6px;
    	}
    </style>
</head>
<body class="skin-blue sidebar-mini fixed skin-blue-light-frame">
    <section class="content-header">
        <h1>权限管理</h1>
        <ol class="breadcrumb">
            <li><a href="${ctx}/home.jsp"><i class="fa fa-home"></i>首页</a></li>
            <li class="active"><a href="#">权限管理</a></li>
        </ol>
    </section>
    <section class="content">
    	<div class="box box-success" style="overflow:hidden;">
    	<div style="position: absolute;bottom:75px;right:10px;">
        <img src="${ctx}/lib/img/privilegeimg.png">
        </div>
    		<table class="privilegeTable">
    			<tr>
    				<td class="leftTd">
    					<div class="ztreePanel">
    						<div id="ztree" class="ztree"></div>
    					</div>
    				</td>
    				<td class="rightTd">
    					<div class="rightTitleDiv">权限详情</div>
						<div class="rightTextDiv">权限名称：<span id="nameSpan"></span></div>
						<div class="rightTextDiv">菜单名称：<span id="menuNameSpan"></span></div>
						<div class="rightTextDiv">权限类型：<span id="typeSpan"></span></div>
						<div class="rightTextDiv">权限链接：<span id="urlSpan"></span></div>
						<div class="rightTextDiv">权限图标：<span id="iconSpan"></span></div>
						<div class="rightTextDiv">权限状态：<span id="statusSpan"></span></div>
						<div class="rightTextDiv">权限顺序：<span id="sortSpan"></span></div>
						<div class="rightTextDiv">权限备注：<span id="remarkSpan"></span></div>
						<div class="box-footer text-left" style="padding:15px;">
							<button id="addPeersNode" type="button" class="btn btn-primary btn-sm">添加同级节点</button>
							<button id="addJuniorNode" type="button" class="btn btn-primary btn-sm">添加子节点</button>
							<button id="editNode" type="button" class="btn btn-primary btn-sm">编&nbsp;辑</button>
							<button id="deleteNode" type="button" class="btn btn-danger btn-sm">删&nbsp;除</button>
						</div>
    				</td>
    			</tr>
    		</table>
		</div>
    </section>
    
    <div class="modal fade" id="dialog" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<input type="hidden" id="id" />
				<input type="hidden" id="pid" />
				<div class="modal-header bg-primary">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h5 class="modal-title">权限<span id="editTitle"></span>(<span id="fatherInfo"></span>)</h5>
				</div>
				<div class="modal-body">
					<div class="form-group form-group-xs">
						<label for="name" class="control-label"><span class="required">*</span>权限名称:</label>
						<input type="text" class="form-control" id="name" placeholder="权限名称" maxlength="50">
					</div>
					<div class="form-group form-group-xs">
						<label for="menuName" class="control-label"><span class="required">*</span>菜单名称:</label>
						<input type="text" class="form-control" id="menuName" placeholder="权限名称" maxlength="50">
					</div>
					<div class="form-group form-group-xs">
						<label for="type" class="control-label"><span class="required">*</span>权限类型:</label>
						<select id="type" class="form-control">
							<c:if test="${ privilegeTypeList != null }">
								<c:forEach items="${ privilegeTypeList }" var="type">
									<option value="${type.key}">${type.value}</option>
								</c:forEach>
							</c:if>
						</select>
					</div>
					<div class="form-group form-group-xs">
                        <label for="classify" class="control-label"><span class="required">*</span>权限分类:</label>
                        <select id="classify" class="form-control">
                            <option value="0">非业务</option>
                            <option value="1">业务</option>
                        </select>
                    </div>
					<div class="form-group form-group-xs">
						<label for="url" class="control-label">权限链接:</label>
						<input type="text" class="form-control" id="url" placeholder="权限链接" maxlength="1000">
					</div>
					<div class="form-group form-group-xs">
						<label for="icon" class="control-label">权限图标:</label>
						<input type="text" class="form-control" id="icon" placeholder="权限图标" maxlength="50">
					</div>
					<div class="form-group form-group-xs">
						<label for="status" class="control-label"><span class="required">*</span>权限状态:</label>
						<select id="status" class="form-control">
							<option value="1">启用</option>
							<option value="0">停用</option>
						</select>
					</div>
					<div class="form-group form-group-xs">
						<label for="sort" class="control-label"><span class="required">*</span>权限顺序:</label>
						<input type="text" class="form-control" id="sort" placeholder="权限顺序" maxlength="5">
					</div>
					<div class="form-group form-group-xs">
						<label for="remark" class="control-label">权限备注:</label>
						<textarea id="remark" rows="3" class="form-control" maxlength="500"></textarea>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary btn-sm" id="savePrivilege">保&nbsp;存</button>
					<button type="button" class="btn btn-danger btn-sm" id="close" data-dismiss="modal">关&nbsp;闭</button>
				</div>
			</div>
		</div>
	</div>
    
    <%@ include file="/WEB-INF/component/commonJS.jsp" %>
    
    <script src="${ctx}/lib/plugins/zTree_v3/js/jquery.ztree.all-3.5.min.js"></script>
    
    <script type="text/javascript">
    	$(document).ready(function() {
    		var opType = 0;
    		var treeObj = null;
    		
    		var setting = {
    			treeNodeKey: "id",         //设置节点唯一标识属性名称
   				check: {
   					enable: false
   				},
   				view: {
   					selectedMulti: false
   				},
   				data: {
   					key: {
   						url: "#",
   						icon: "#"
   					},
   					simpleData: {
   						enable: true
   					}
   				},
   				callback: {
   					onClick: function(event, treeId, treeNode) {
   						$("#nameSpan").html(treeNode.name || "");
   						$("#menuNameSpan").html(treeNode.menuName || "");
   						$("#typeSpan").html(treeNode.typeName || "");
   						$("#urlSpan").html(treeNode.url || "");
   						$("#iconSpan").removeAttr("class").addClass(treeNode.icon || "");
   						$("#statusSpan").html(treeNode.statusName || "");
   						$("#sortSpan").html(treeNode.sort || "0");
   						$("#remarkSpan").html(treeNode.remark || "");
   					}
   				}
   			};
    		
    		function cleanForm() {
    			$("#id").val("");
    			$("#pid").val("");
        		$("#name").val("");
        		$("#menuName").val("");
        		$("#type").val("0");
        		$("#url").val("");
        		$("#icon").val("");
        		$("#status").val("1");
        		$("#sort").val("0");
    			$("#remark").val("");
        	}
    		
    		//	查询权限列表
    		function getPrivilegeList() {
    			$.post("getPrivilegeList.html", {
    				
    			}, function(list) {
    				treeObj = $.fn.zTree.init($("#ztree"), setting, (list || []));
    				//treeObj.expandAll(true);
    			}, "json").error(function(err) {
        			top.window.document.location = "${ctx}/login.html"; 
        		});
    		}
    		
    		//	获取选中节点
    		function getSelectedNode() {
    			if (treeObj != null) {
    				var nodes = treeObj.getSelectedNodes();
    				if (nodes.length > 0) {
    					return nodes[0];
    				}
    			}
    			return null;
    		}
    		
    		var privilegeTypeList = [
    		    {"key" : 0, "value" : "系统"},
    		    {"key" : 1, "value" : "模块"},
    		    {"key" : 2, "value" : "菜单"},
    		    {"key" : 3, "value" : "按钮"}
    		];
    		
    		//	初始化权限类型
    		function initPrivilegeType(fatherType) {
    			$("#type option").remove();
   				switch (fatherType) {
       			case 0:	//	系统下可新建模块或菜单
       				$("#type").append("<option value='1'>模块</option>");
       				$("#type").append("<option value='2'>菜单</option>");
       				break;
   				case 1:	//	模块下可新建菜单
   					$("#type").append("<option value='1'>模块</option>");
   					$("#type").append("<option value='2'>菜单</option>");
   					break;
   				case 2:	//	菜单下可新建按钮
   					$("#type").append("<option value='3'>按钮</option>");
   					break;
				default:	//	根只能新建系统
					$("#type").append("<option value='0'>系统</option>");
       			}
    		}
    		
    		//	添加同级
			$("#addPeersNode").click(function() {
				opType = 0;
				cleanForm();
				$("#editTitle").html("新增同级节点");
				var node = getSelectedNode();
    			if (node != null) {
    				var parent = node.getParentNode();
    				if (parent != null) {
    					var pid = parent.id || "0";
           				$("#pid").val(pid);
           				$("#fatherInfo").html("父节点：" + (parent.name || ""));
           				// initPrivilegeType(parent.type);
    				} else {
           				$("#pid").val("0");
           				$("#fatherInfo").html("父节点：无");
           				// initPrivilegeType();
    				}
    			} else {
    				$("#pid").val("0");
    				$("#fatherInfo").html("父节点：无");
    				// initPrivilegeType();
    			}
   				$('#dialog').modal({
                    keyboard: true
                });
    		});
    		
			//	添加子级
			$("#addJuniorNode").click(function() {
				opType = 1;
				cleanForm();
				$("#editTitle").html("新增子节点");
				var node = getSelectedNode();
    			if (node) {
    				var pid = node.id || "0";
    				$("#pid").val(pid);
    				$("#fatherInfo").html("父节点：" + (node.name || ""));
    				// initPrivilegeType(node.type);
    				$('#dialog').modal({
                        keyboard: true
                    });
    			} else {
    				$.HN.message.alert("请选择要操作的权限节点！", "消息", "warn");
    			}
    		});
			
			//	编辑
			$("#editNode").click(function() {
				opType = 2;
				cleanForm();
				$("#editTitle").html("编辑");
				var node = getSelectedNode();
				$("#fatherInfo").html("");
    			if (node) {
    				var parent = node.getParentNode();
    				if (parent != null) {
    					$("#fatherInfo").html("父节点：" + (parent.name || ""));
    					// initPrivilegeType(parent.type);
    				}
    				$("#id").val(node.id);
    				$("#pid").val(node.pid);
    				$("#name").val(node.name);
    				$("#menuName").val(node.menuName);
            		$("#type").val(node.type);
            		$("#classify").val(node.classify);
            		$("#url").val(node.url);
            		$("#icon").val(node.icon);
            		$("#status").val(node.status);
            		$("#sort").val(node.sort);
        			$("#remark").val(node.remark);
    				$('#dialog').modal({
                        keyboard: true
                    });
    			} else {
    				$.HN.message.alert("请选择要操作的权限节点！", "消息", "warn");
    			}
			});
			
	    	//	校验角色信息
	    	function validate() {
	    		var name = $.trim($("#name").val());
	    		if (name == null || name == "") {
	    			$.HN.message.alert("请输入权限名称！", "消息", "warn");
	    			return false;
	    		}
	    		
	    		var menuName = $.trim($("#menuName").val());
	    		if (menuName == null || menuName == "") {
	    			$.HN.message.alert("请输入菜单名称！", "消息", "warn");
	    			return false;
	    		}
	    		
	    		var type = $.trim($("#type").val());
	    		if (type == null || type == "") {
	    			$.HN.message.alert("请选择权限类型！", "消息", "warn");
	    			return false;
	    		}
	    		
	    		
	    		var status = $.trim($("#status").val());
	    		if (status == null || status == "") {
	    			$.HN.message.alert("请选择权限状态！", "消息", "warn");
	    			return false;
	    		}
	    		
	    		var sort = $.trim($("#sort").val());
	    		if (sort == null || sort == "") {
	    			$.HN.message.alert("请输入权限顺序！", "消息", "warn");
	    			return false;
	    		} else if (!/^\d{1,5}$/.test(sort)) {
	    			$.HN.message.alert("权限顺序不是正整数！", "消息", "warn");
	    			return false;
	    		}
	    		
	    		return true;
	    	}
			
			//	保存
			$("#savePrivilege").click(function() {
				if (!validate()) {
					return;
				}
				var params = {
					id : $("#id").val(),
					pid : $("#pid").val(),
					name : $("#name").val(),
					menuName : $("#menuName").val(),
					type : $("#type").val(),
					classify : $("#classify").val(),
					url : $("#url").val(),
					icon : $("#icon").val(),
					status : $("#status").val(),
					sort : $("#sort").val(),
					remark : $("#remark").val()
				};
				$.post("savePrivilege.html", params, function(result) {
					if (result.success) {
						var node = getSelectedNode();
		    			if (node) {
		    				if (opType == 0) {
		    					treeObj.addNodes(node.getParentNode(), result.rows);
		    				} else if (opType == 1) {
		    					treeObj.addNodes(node, result.rows);
		    				} else if (opType == 2) {
		    					node.id = params.id;
			    				node.pid = params.pid;
			    				node.name = params.name;
			    				node.menuName = params.menuName;
			    				node.type = params.type;
			    				node.classify = params.classify;
			    				node.url = params.url;
			    				node.icon = params.icon;
			    				node.status = params.status;
			    				node.sort = params.sort;
			    				node.remark = params.remark;
			    				$("#nameSpan").html(node.name || "");
			    				$("#menuNameSpan").html(node.menuName || "");
		   						$("#typeSpan").html(node.typeName || "");
		   						$("#urlSpan").html(node.url || "");
		   						$("#iconSpan").removeAttr("class").addClass(node.icon || "");
		   						$("#statusSpan").html(node.statusName || "");
		   						$("#sortSpan").html(node.sort || "0");
		   						$("#remarkSpan").html(node.remark || "");
		    					treeObj.updateNode(node);
		    				}
		    			}
		    			// getPrivilegeList();
		    			$('#close').click();
						$.HN.message.alert("操作成功！", "消息", "success");
					} else {
						$.HN.message.alert("操作失败！", "消息", "error");
					}
				}, "json").error(function(err) {
	    			top.window.document.location = "${ctx}/login.html"; 
	    		});
			});
			
			//	删除
			$("#deleteNode").click(function() {
				var node = getSelectedNode();
    			if (node) {
    				var id = node.id || "0";
    				$.HN.message.confirm("确定删除吗？", "消息", "确定").on(function(ok) {
    					if (ok) {
    						$.post("deletePrivilege.html", {
    							id : id
    						}, function(result) {
    							if (result.success) {
    								treeObj.removeNode(node);
    								$.HN.message.alert("操作成功！", "消息", "success");
    							}
    						}, "json").error(function(err) {
    			    			top.window.document.location = "${ctx}/login.html"; 
    			    		});
    					}
    				});
    			} else {
    				$.HN.message.alert("请选择要操作的权限节点！", "消息", "warn");
    			}
			});
    		
    		getPrivilegeList();
    		
    	});
    </script>
</body>
</html>






